<template>
  <el-dialog
    :title="title"
    v-model="showDialogFlag"
    :show-close="true"
    append-to-body
    width="830px"
    :destroy-on-close="true"
  >
    <el-form>
      <el-form-item label="选择数据：" label-position="top" required>
        <el-transfer
          class="download-excel-header-transfer"
          ref="transfer"
          v-model="selectData"
          :titles="['可选数据', '已选数据']"
          filterable
          item-class="custom-class"
          filter-placeholder="请输入关键词"
          :data="transferData"
          @change="onChange"
        >
        <template #default="{ option }">
          <div class="trnsfer-label-box">
            <div class="trnsfer-label-box-label">
              <el-tooltip effect="light" :content="option.label">
                <span><span v-if="option.required" class="required-icon">*</span>{{ filterSpecialCharByLabel(option.label) }}</span>
              </el-tooltip>
            </div>
            <el-icon class="rank-icon"><Rank /></el-icon>
          </div>
        </template>
        </el-transfer>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showDialogFlag = false">关闭</el-button>
        <el-button type="primary" @click="onOk" :disabled="disabeldOkBtn">
          {{ confirmText }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import Sortable from 'sortablejs';
export default {
  props: {
    title: String,
    confirmText: {
      type: String,
      default: '确认'
    }
  },
  data() {
    return {
      showDialogFlag: false,
      transferData: [],
      selectData: [],
    }
  },
  computed: {
    disabeldOkBtn() {
      return this.selectData.length === 0
    }
  },
  methods: {
    open({data}) {
      const that = this
      this.transferData = data
      this.selectData = []
      this.showDialogFlag = true
      this.$nextTick(() => {
        const res = document.getElementsByClassName('el-transfer-panel__list')
        new Sortable(res[1], {
          animation: 150,
          ghostClass: 'el-transfer-panel__item-sortable',
          onEnd: (evt) => {
            // 通过evt.oldIndex和evt.newIndex更新selectData对应数据的位置
            const temp = that.selectData[evt.oldIndex];
            that.selectData.splice(evt.oldIndex, 1);
            that.selectData.splice(evt.newIndex, 0, temp);
          }
        });
      })
    },

    // 过滤特殊字符
    filterSpecialCharByLabel(str) {
      if (typeof str === 'string') return str = str.replaceAll(/<br>/g, '')
      return str
    },
    onChange() {
      this.$nextTick(() => {
        // 给el-transfer右侧面板子元素动态添加自定义类名
        const panelList = document.querySelectorAll('.download-excel-header-transfer .el-transfer-panel__list')
        const itemList = panelList[1].querySelectorAll('.el-transfer-panel__item')
        if(itemList.length) {
          itemList.forEach(item => {
            item.classList.add('el-transfer-panel__item-sortable')
          })
        }
      })
    }, 
    async onOk() {
      this.showDialogFlag = false
      this.$emit('ok', this.selectData)
      this.selectData = []
    }
  },
}
</script>
<style lang="scss" scoped>
:deep(.el-transfer-panel) {
  width: 300px; /* 修改这里的数值来调整宽度 */
  &:first-child {
    .rank-icon {
      display: none;
    }
  }
  &:last-child {
    .el-transfer-panel__list {
      .el-checkbox {
        margin-right: 15px;
      }
    }
  }
}
.trnsfer-label-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: center;
  &-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .required-icon {
    color: red;
    margin-right: 4px;
  }
}
</style>